<template>
  <div>
    <a-modal
      title="批量设置年度考核"
      :visible="visible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="50%"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName=""
      @cancel="closeVisible"
      @ok="handleOk"
      class="batchKaoPing-modal-box"
      >
      <a-descriptions bordered style="width: 100%;" :column="1" class="descriptions-batchKaoPing">
        <a-descriptions-item>
            <span slot="label" class="descriptions-label-slot">
                当前选择人员
            </span>
              <span>{{ manList.toString()}}</span>
        </a-descriptions-item>
        <a-descriptions-item>
            <span slot="label" class="descriptions-label-slot">
                <span style="color: red;">*</span>
                考核结果
            </span>
              <a-radio-group
                v-model="kpjg"
                @change="checkChange($event.target.value)"
                :options="checkArray"
              />
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      manList: [],
      kpjg: '',
      checkArray: [
        { label: "优秀", value: "优秀" },
        { label: "合格", value: "合格" },
        { label: "不合格", value: "不合格" },
      ],
    }
  },
  methods: {
    getData(val){
      this.manList = val
    },
    closeVisible(){
      this.visible = false
      this.manList = []
      this.kpjg = ''
    },
    checkChange(val){
      //console.log('考评结果',this.kpjg)
      this.kpjg = val
    },
    handleOk(){
      if(!this.kpjg){
        this.$message.warning('请选择批量考核结果')
        return
      }
      var that = this
      that.$confirm({
        title: '您确定要将所选人员年度考核结果评定为 '+ that.kpjg + ' 吗?',
        content: '',
        okText: '确定',
        okType: 'info',
        cancelText: '取消',
        onOk() {
          that.$emit('batchSubmit',that.kpjg)
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    }
  },
}
</script>
<style lang="less">
.batchKaoPing-modal-box{


  .ant-descriptions-bordered .ant-descriptions-item-label{
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      background-color:#e6f7ff;
      width: 150px !important;
      text-align: center;
      font-size: 16px;
  }
  .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
      padding: 5px 10px !important;

  }
  .descriptions-dengji {
      .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 123px !important;//确保左侧固定文字不会换行
        line-height: 2;
        text-align: center;
        justify-content: center;
    }
    .descriptions-content-item {
      .ant-form-item-control-wrapper{
          width: 100%;
      }
    }
  }
}
</style>
